<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咱们的乐购商城</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入通用样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入轮播插件样式 -->
    <link rel="stylesheet" href="./css/slider.css">
    <!-- 引入自己的样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入jquery -->
    <script src="js/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入轮播插件 -->
    <script src="./js/lib/slidebox.js"></script>
    <!-- 引入自己的JS -->
    <script src="./js/index.js"></script>

</head>

<body>
    <header class="">
        <!-- 第一行 -->
        <div class="first-bar full-container">
            <div class="center clear-fix">
                <img src="./images/logo.jpg" alt="">
                <p class="fl"><a href="#" class="font-white">legochina.cn</a></p>
                <p class="fr">欢迎光临<span class="theme-color">乐购</span>,请<span>登录</span>\<span
                        class="theme-color">注册</span></p>
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="center clear-fix">
            <div class="fr clear-fix search-box">
                <form id="sub-form" action="" class="fl">
                    <input type="text">
                    <input type="submit" value="" class="theme-bg">
                </form>

                <div class="fl">
                    购物车<span>3</span>
                </div>
                <div class="fl">
                    我的订单
                </div>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="nav-bar center">
            <ul class="clear-fix">
                <li>图书</li>
                <li>电子书</li>
                <li>原创文学</li>
                <li>服装</li>
                <li>运动户外</li>
                <li>儿童装</li>
                <li>家居</li>
                <li>创意文具</li>
                <li>地方特产</li>
                <li>海外购</li>
                <li>电器城</li>
            </ul>
        </div>
    </header>
    <main>
        <section class="center  clear-fix">
            <div class=" dir fl">
                <ul>
                    <li>
                        <p>图书、电子书、童书1</p>
                        <div class="hidden-box">
                            <p>图书馆&gt;&gt; 儿童书馆&gt;&gt; 电子书馆&gt;&gt;</p>
                            <p class="theme-color">文艺1</p>
                            <p>小说 文学 传记 青春 动漫 艺术 摄影 明星</p>
                        </div>
                    </li>
                    <li>
                        <p>图书、电子书、童书2</p>
                        <div class="hidden-box">
                            <p>图书馆&gt;&gt; 儿童书馆&gt;&gt; 电子书馆&gt;&gt;</p>
                            <p class="theme-color">文艺2</p>
                            <p>小说 文学 传记 青春 动漫 艺术 摄影 明星</p>
                        </div>
                    </li>
                    <li>
                        <p>图书、电子书、童书3</p>
                        <div class="hidden-box">
                            <p>图书馆&gt;&gt; 儿童书馆&gt;&gt; 电子书馆&gt;&gt;</p>
                            <p class="theme-color">文艺3</p>
                            <p>小说 文学 传记 青春 动漫 艺术 摄影 明星</p>
                        </div>
                    </li>

                </ul>

            </div>
            <div class="swiper fl">
                <div class="pptbox slide fl" id="slider">
                    <ul class="innerwrapper">
                        <li><a href="#"><img src="images/banner1.jpg" /></a></li>
                        <li><a href="#"><img src="images/banner2.jpg" /></a></li>
                        <li><a href="#"><img src="images/banner3.jpg" /></a></li>
                        <li><a href="#"><img src="images/banner4.jpg" /></a></li>
                        <li><a href="#"><img src="images/banner5.jpg" /></a></li>
                    </ul>
                    <ul class="controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
            </div>
        </section>
        <section class="today-recommend center">
            <h2 class="theme-color">乐购·今日推荐</h2>
            <div class="theme-line5"></div>
            <ul class="clear-fix">
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>
                <li>
                    <img src="./images/index06_05.jpg" alt="">
                    <p class="hot-sell">抢抢抢</p>
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥：299</p>
                </li>

            </ul>

        </section>
        <section id="flag_0" class="ebook center clear-fix">
            <div class="fl ">
                <div class="ebook-title clear-fix">
                    <h2 class="fl">图书 电子书</h2>
                    <div class="fr">
                        <a href="javascript:void(0);">最新上架</a>
                        <a href="javascript:void(0);">独家畅销</a>
                        <a href="javascript:void(0);">电子书</a>
                    </div>
                </div>
                <div class="theme-line5"></div>
                <div class="ebook-content clear-fix">
                    <div class="fl " style="background: #f3f3f3;">
                        <img src="./images/ebook-demo1.jpg" alt="">
                        <p>青草文学 青草文学 青草文学</p>
                        <p>青草文学 青草文学 青草文学</p>
                        <p>青草文学 青草文学 青草文学</p>
                    </div>
                    <div class="ebook-swiper fl ">
                        <ul class="clear-fix">
                            <li>
                                <div class="pptbox slide fl" id="slider1">
                                    <ul class="innerwrapper">
                                        <li><a href="#"><img src="images/banner1.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner2.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner3.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner4.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner5.jpg" /></a></li>
                                    </ul>
                                    <ul class="controls">
                                        <li class="current">1</li>
                                        <li>2</li>
                                        <li>3</li>
                                        <li>4</li>
                                        <li>5</li>
                                    </ul>
                                    <span class="btnleft"></span>
                                    <span class="btnright"></span>
                                </div>
                            </li>
                            <li>
                                <p>奥运狂欢22</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢11</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢11</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢11</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢11</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢11</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                        </ul>
                        <ul class="clear-fix">
                            <li>
                                <div class="pptbox slide fl" id="slider2">
                                    <ul class="innerwrapper">
                                        <li><a href="#"><img src="images/banner1.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner2.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner3.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner4.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner5.jpg" /></a></li>
                                    </ul>
                                    <ul class="controls">
                                        <li class="current">1</li>
                                        <li>2</li>
                                        <li>3</li>
                                        <li>4</li>
                                        <li>5</li>
                                    </ul>
                                    <span class="btnleft"></span>
                                    <span class="btnright"></span>
                                </div>
                            </li>
                            <li>
                                <p>奥运狂欢22</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢22</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢22</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢22</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢22</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢22</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                        </ul>
                        <ul class="clear-fix">
                            <li>
                                <div class="pptbox slide fl" id="slider3">
                                    <ul class="innerwrapper">
                                        <li><a href="#"><img src="images/banner1.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner2.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner3.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner4.jpg" /></a></li>
                                        <li><a href="#"><img src="images/banner5.jpg" /></a></li>
                                    </ul>
                                    <ul class="controls">
                                        <li class="current">1</li>
                                        <li>2</li>
                                        <li>3</li>
                                        <li>4</li>
                                        <li>5</li>
                                    </ul>
                                    <span class="btnleft"></span>
                                    <span class="btnright"></span>
                                </div>
                            </li>
                            <li>
                                <p>奥运狂欢33</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢33</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢33</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢33</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢33</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                            <li>
                                <p>奥运狂欢33</p>
                                <p>11万种电子书 直降了40%</p>
                                <img src="./images/ebook-demo2.jpg" alt="">
                                <p>
                                    <span>￥：49</span> <span style="text-decoration: line-through;">￥79</span>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr  new-book">
                <h3>新书畅销榜</h3>
                <ul>
                    <li>
                        <span>1</span>
                        <p>就喜欢你看不惯我 又干不</p>
                        <div class="clear-fix">
                            <img src="./images/ebook-demo3.jpg" alt="" class="fl">
                            <p class="fr">从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</p>
                        </div>
                    </li>
                    <li>
                        <span>2</span>
                        <p>就喜欢你看不惯我 又干不</p>
                        <div class="clear-fix">
                            <img src="./images/ebook-demo3.jpg" alt="" class="fl">
                            <p class="fr">从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</p>
                        </div>
                    </li>
                    <li>
                        <span>3</span>
                        <p>就喜欢你看不惯我 又干不</p>
                        <div class="clear-fix">
                            <img src="./images/ebook-demo3.jpg" alt="" class="fl">
                            <p class="fr">从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</p>
                        </div>
                    </li>
                </ul>

            </div>
        </section>
        <section id="flag_1" class="center ">
            <img src="./images/cloth.jpg" alt="">
        </section>
        <section id="flag_2" class="center ">
            <img src="./images/sport.png" alt="">
        </section>
        <section id="flag_3" class="center ">
            <img src="./images/child.png" alt="">
        </section>
        <section id="flag_4" class="center ">
            <img src="./images/house.png" alt="">
        </section>
        <section class="center ">
            <img src="./images/tuijian.png" alt="">
        </section>
        <section class="floor">
            <ul>
                <li>图书</li>
                <li>服装</li>
                <li>运动</li>
                <li>童装</li>
                <li>家居</li>
            </ul>
        </section>
        <!-- 固定顶部窗体 -->
        <section class="fixed-box" style="width:100%;background-color: black;position: fixed;height:40px; display: none; top:0;left:0;">
        </section>
    </main>
    <footer class="center">
        <img src="./images/footer.png" alt="">
    </footer>
</body>

</html>